<template>
  <div class="relative-full ml-friend">
    <div class="friend-card ld"
         :key="friend._id"
         v-for="friend in friends"
         @mouseleave="removeClass('ld-wander-v',$event)"
         @mouseenter="addClass('ld-wander-v',$event)"
         @click="openUrl(friend.website)">
      <img :src="friend.head" class="f-head wh42 circle-h mr-3"/>
      <div class="f-meta">
        <div class="f-name" style="font-weight: 600;font-size: 16px">{{ friend.name }}</div>
        <div class="f-desc">{{ friend.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util'
import { GetAllFriend } from "@/api/blog-api";

export default {
  name: 'friend',
  data () {
    return {
      friends: []
    }
  },
  created () {
    this.getFriend()
  },
  methods: {
    getFriend(){
      GetAllFriend().then(res => {
        this.friends = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    removeClass (className, e) {
      e.target.classList.remove(className)
    },
    addClass (className, e) {
      // console.log(e.target)
      e.target.classList.add(className)
    },
    openUrl (url) {
      util.open(url)
    },
  },
}
</script>

<style>
.ml-friend {
  padding: 30px 18px;
}

.friend-card {
  cursor: pointer;
  display: flex;
  width: 320px;
  padding: 14px 18px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 2px 12px 26px 3px rgba(167, 163, 172, 0.3);
}

.f-head {
  flex: 0 0 42px;
}

.f-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.f-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
